<template>
	<view >
		<view class="topView">
			<view @click="toInfo()"  class="flex-row-space-between" style="margin: 0 30rpx;">
				<view class="flex-row-flex-start">
					<image class="header" :src="isLogin ? userInfo.avatar : '/static/images/my_portrait_empty.png'" mode="scaleToFill"></image>
					<view v-if="isLogin" class="">
						<view class="nickname">
							{{userInfo.nickname}}
						</view>
						<view class="mobile">
							{{userInfo.mobile}}
						</view>
					</view>
					<view  v-else @click.stop="goLogin">
						<view class="nickname">
							点击登录
						</view>
						
						<view class="mobile">
							登录体验更多功能
						</view>
					</view>
				</view>
				<u-icon size="18"  name="arrow-right" color="#333333"></u-icon>
			</view>
			<view class="itemView1 flex-row-center">
				<view v-for="(item,index) in itemList1" style="width: 25%;" :key="index">
					<view @click="itemClick(item)" class=" flex-column-center">
						<image class="icon1" :src="item.icon" mode="scaleToFill"></image>
						<view class="itemName">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="itemView">
				<view class="itemView_title">
					常用功能
				</view>
				<view v-for="(item,index) in itemList" :key="index">
					<view @click="itemClick(item)" class="item">
						<view class="itemBlock">
							<image class="icon" :src="item.icon" mode="scaleToFill"></image>
							<view class="itemName">
								{{item.name}}
							</view>
						</view>
						<view class="itemRight">
							<image class="icon-right" src="@/static/my/icon-right.png" mode="scaleToFill"></image>
						</view>
						
						<!-- <u-icon name="arrow-right" size="16" color="#666666"></u-icon> -->
					</view>
			
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getUser
	} from '@/api/user';
    import { getOrderNum } from '@/api/recycle.js';
    import { getLeaseOrderNum } from '@/api/lease.js';
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {menuJump, copy, setTabbar} from '@/utils/tools'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		data() {
			return {
				itemList1: [
					{
						name: '待付款',
						url: '/bundle/pages/lease_order_lists/lease_order_lists',
						icon:"/static/my/11.png"
					},
					{
						name: '待发货',
						url: '/bundle/pages/lease_order_lists/lease_order_lists',
						icon:"/static/my/12.png"
					},
					{
						name: '待收货',
						url: '/bundle/pages/lease_order_lists/lease_order_lists',
						icon:"/static/my/13.png"
					},
					{
						name: '进行中',
						url: '/bundle/pages/lease_order_lists/lease_order_lists',
						icon:"/static/my/14.png"
					}
				],
				itemList: [
					{
						name: '我的钱包',
						url: '/bundle/pages/user_wallet/user_wallet',
						icon:"/static/my/1.png"
					},
					{
						name: '我的收藏',
						url: '/pages/user_collection/user_collection',
						icon:"/static/my/2.png"
					},
					// {
					// 	name: '商家入驻',
					// 	url: '/pages/settled/settled',
					// 	icon:"/static/my/3.png"
					// },
					// {
					// 	name: '推荐好友',
					// 	url: '/bundle/pages/user_spread/user_spread',
					// 	icon:"/static/my/4.png"
					// },
					{
						name: '收货地址',
						url: '/pages/user_address/user_address',
						icon:"/static/my/5.png"
					},
					
					{
						name: '投诉反馈',
						url: '/pages/user/feedback',
						icon:"/static/my/6.png"
					},
					{
						name: '设置',
						url: '/pages/user/setUp',
						icon:"/static/my/7.png"
					},
					
				],
				showNav: false,
				navH: 0,
				navBg: 0,
				menuList: [],
				statusBarH: "",
                recycleOrderNum: 0,     // 回收订单数量
                leaseOrderNum: 0,       // 租赁订单数量
			};
		},

		components: {},
		props: {},

		onLoad(options) {
			setTabbar()
			// this.getMenuFun();
		},

		onShow() {
			// this.getUser();
			// this.getCartNum();
            
   //          getOrderNum().then(res => {
   //              if (res.code != 1) return;
   //              this.recycleOrderNum = res.data;
   //          });
            
   //          getLeaseOrderNum().then(res => {
   //              if (res.code != 1) return;
   //              this.leaseOrderNum = res.data;
   //          });
   console.log(this.isLogin)
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},

		onUnload() {
		},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/lease/lease?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_bg,
			};
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			toInfo(){
			uni.navigateTo({
				url:'/bundle/pages/user_profile/user_profile'
			})	
			},
			itemClick(item){
				if(!this.isLogin) return toLogin()
				uni.navigateTo({
					url:item.url
				})
			},
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/bundle/pages/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			goPage(url) {
				if(!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			tapMenu(item) {
				if(!this.isLogin) return toLogin()
				console.log(item)
				menuJump(item)
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					this.menuList = data
				}
			},
			
			onCopy(e) {
                copy(this.userInfo.sn);
			},



		},
		computed: {
			...mapGetters(["cartNum", "userInfo", "inviteCode", "appConfig"]),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.topView {
		padding-top: 200rpx;
		height: 501.91rpx;
		// background-image: url($baseUrl+'/topBG.png');
		// background-size: 100% 100%;
		background: linear-gradient(180deg, rgba(255, 110, 22, 0.5) 0%, rgba(255, 110, 22, 0) 100%);

	}
	.header{
		margin-right: 15rpx;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}
	.nickname{
		font-size: 38rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.mobile{
		margin-top: 14rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.itemView {
		margin:32rpx;
		padding: 40rpx 32rpx;
		background: #FFFFFF;
	}
	.itemView_title{
		margin-bottom: 30rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
		line-height: 46rpx;
	}
	.item {
		width: 100%;
		height: 85rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.itemBlock{
			display:flex;
			align-items: center;
			// flex-direction: column;
		}
		.icon-right{
			width: 14rpx;
			height: 22rpx;
		}
		
		.icon{
			margin-right: 20rpx;
		}
		
		.itemName {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 80rpx;
		}
		
	}
	
	.itemView1 {
		margin:30rpx;
		padding:40rpx 0;
		background: #FFFFFF;
		border-radius: 24rpx;
	}
	.icon1{
		margin-bottom: 10rpx;
		width: 56rpx;
		height: 56rpx;
	}
</style>
